<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NSCanvas</title>
</head>

<body>
	<script src="../com/NSCanvasStage.js"></script>
    <script type="text/javascript">
		var MozaicRect = function()
		{
			this.x = 0;
			this.y = 0;
			this.width = 10;
			this.height = 10;
			this.alpha = 1.0;
			this.delay = 0;
			
			// 면 체우기
			this.image;
			
			this._displayUpdateWithContext2D = function( context )
			{
				context.globalAlpha = this.alpha;
				context.drawImage( this.image, this.x, this.y, this.width, this.height, this.x, this.y, this.width, this.height );
				if( this.delay <= 0 )
				{
					this.alpha += ( 0-this.alpha)*0.18;
				}else{
					this.delay -= 0.1;
				}
			}
		}
		
		
		
		function init()
		{
			var _image 		= new Image();
			_image.src		= "com/_resource/Image.png";
			_image.onload = function()
			{
				var _canvas = document.createElement( "canvas" );
				_canvas.width = this.width;
				_canvas.height = this.height;
				document.body.appendChild( _canvas );
				
				var _numW	= 20;
				var _numH		= 10;
				var _sizeW		= this.width/_numW;
				var _sizeH		= this.height/_numH;
				console.log( _numH );
				var _stage = new NSCanvasStage( _canvas );
				for( var i=0; i<_numH; i++ )
				{
					for( var j=0; j<_numW; j++ )
					{
						var _rect 		= new MozaicRect();
						_rect.x			= j*_sizeW;
						_rect.y			= i*_sizeH;
						_rect.width 	= _sizeW;
						_rect.height 	= _sizeH;
						_rect.delay		= Math.random()*3 + 5;
						_rect.image 	= this;
						_stage.addChild( _rect );
					}
				}
				_stage.start();
			}
		}
		init();
	</script>
</body>
</html>
